import React, {useState, useEffect} from 'react'
import '../public/style/components/header.css'
import Router from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import servicePath from '../config/apiUrl'

import {Row, Col, Menu,} from 'antd'

const Header = () => {
	const [navArray, setNavArray] = useState([])
	useEffect(() => {
		const fetchData = async () => {
			const result = await axios.get(servicePath.getTypeInfo).then(
				(res) => {
					setNavArray(res.data.data)
					return res.data.data
				}
			)
			setNavArray(result)
		}
		fetchData()
	}, [])

	const handClick = (e) => {
		if (e.key === 0) {
			Router.push('/index')
		} else {
			Router.push('/list?id=' + e.key)
		}
	}

	return (
		<div className='header'>
			<Row type='flex' justify='center'>
				<Col xs={24} sm={24} md={10} lg={15} xl={12}>
					<span className='header_logo'>AxiTalk</span>
					<span className='header_txt'>飓风过岗 伏草惟存</span>
				</Col>

				<Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
					<Menu mode='horizontal' onClick={handClick}>
						<Menu.Item key='0'>
							首页
						</Menu.Item>
						{
							navArray.map((item) => {

								return (
									<Menu.Item key={item.id}>
										{item['typeName']}
									</Menu.Item>
								)
							})
						}
					</Menu>
				</Col>
			</Row>
		</div>
	)
}


export default Header